<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<!DOCTYPE html>
<body style="background: white;">
    <script src="/public/js/jquery-1.11.3.min.js"></script>
    <link href="/public/css/bootstrap.css" rel="stylesheet">
    <script src="/public/js/bootstrap.js"></script>
    <link href="/public/iconfont/iconfont.css">
    <!--<script src="/public/js/tiff.min.js"></script>-->

    <script>
        var MOUSECELLNUM = 6;
        var ENTERITISNUM = 9;
        var MOUSESCIATICNERVENUM = 7;
        var m_currentIndex = 0;

        var loadPNGImage = function (filename, index) {
            var image = new Image();
            // filename.replace(/png/,"jpg");
            // alert(filename);
            image.src = filename;
            // alert("filename:" + filename);
            image.id = "canvas_" + index;
            image.className = "img-rounded"
            image.original = mouseimageFiles[index];
            image.value = index;
            // image.style.cursor = cursor:pointer;
            image.style.width = "170px";
            image.onload = function () {
                var $elem = $('<span class="one"><br><br><span class="label label-info">' + mouseImageInfos[
                    index] + '<br></span></span>');
                $elem.prepend(image);
                $('#output').append($elem);
                // if(index < MOUSECELLNUM){
                //    $('#output').append($elem);
                //  }else if(index <MOUSECELLNUM + ENTERITISNUM){
                //    $('#output2').append($elem);
                //  }else if(index < MOUSECELLNUM + ENTERITISNUM + MOUSESCIATICNERVENUM){
                //     $('#output3').append($elem);
                //  }

            }


        };

        var loadImage = function (filename, index) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', filename);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function (e) {
                var buffer = xhr.response;
                var tiff = new Tiff({
                    buffer: buffer
                });
                var canvas = tiff.toCanvas();
                var width = tiff.width();
                var height = tiff.height();
                canvas.id = "canvas_" + index;
                if (canvas) {
                    canvas.style.width = "170px";
                    /*
                    var $elem = $('<div><div><a href="' + filename + '">' +
                                  filename +
                                  ' (width: ' + width + ', height:' + height + ')' +
                                  '</a></div></div>');
                    $elem.append(canvas);
                    $('#output').append($elem);
                    */
                    //canvas.onclick="ShowDiv('MyDiv','fade')"
                    // canvas.addEventListener('click',function(e){
                    //               getEventPosition(e);
                    //           },false);
                    // var $elem = $('<span class = "one"> </span>');
                    var $elem = $('<span class="one"><br><br><span class="label label-info">' + mouseimageFiles[
                        index] + '<br></span></span>');
                    $elem.prepend(canvas);
                    $('#output').append($elem);
                }
            };
            xhr.send();
        };

        function bodyScroll(event) {
            event.preventDefault();
        }
        //禁止/允许滚动页面
        function scrControl(t) {
            if (t == 0) { //禁止滚动
                document.body.addEventListener('touchmove', this.bodyScroll, {
                    passive: false
                });
            } else if (t == 1) { //开启滚动
                document.body.removeEventListener('touchmove', this.bodyScroll, {
                    passive: false
                });
            }
        }


        function getEventPosition(ev) {

            ShowDiv("MyDiv", "fade");
            /*
                      　　var x, y;
                      　　if (ev.layerX || ev.layerX == 0) {
                          　　x = ev.layerX;
                          　　y = ev.layerY;
                      　　} else if (ev.offsetX || ev.offsetX == 0) { // Opera
                          　　x = ev.offsetX;
                          　　y = ev.offsetY;
                      　　}
                      　　return {x: x, y: y};
                      */
        }
        /*
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'arraybuffer';
        xhr.open('GET', "Merge.tiff");
        xhr.onload = function (e) {
          var tiff = new Tiff({buffer: xhr.response});
          var canvas = tiff.toCanvas();
          canvas.style.width = "170px";
          $('#output').empty().append(canvas);
          //document.body.append(canvas);
        };
        xhr.send();
        */
       

        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth; // bgdiv.style.height = $(document).height();

            $("#" + bg_div).height($(document).height());
        };
        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
            // scrControl(1);
            document.body.removeEventListener('touchmove', bodyScroll, false);
            $("body").css({
                "overflow": "auto",
                "height": "auto",
                "position": "initial"
            });
            // 'overflow':'hidden' ,"position":"initial"
        };

        //上一张
        function previewImage() {
            if (m_currentIndex - 1 >= 0) {
                m_currentIndex = m_currentIndex - 1;

                $("#detailImage").attr("src", mouseimageFiles[m_currentIndex]);
                // alert(m_currentIndex + " " + mouseimageFiles[m_currentIndex]);
                // $("#imageInfoTitle").html(imageInfoTitles[m_currentIndex]);
                // alert(m_currentIndex + " " + imageInfoTitles[m_currentIndex]);
                // $("#imageInfoDetail").html(imageInfoDetails[m_currentIndex]);
                // alert(m_currentIndex + " " + imageInfoTitles[m_currentIndex]);
            }

        }

        //下一张
        function nextImage() {
            if (m_currentIndex + 1 < mouseimageFiles.length) {
                m_currentIndex = m_currentIndex + 1;
                $("#detailImage").attr("src", mouseimageFiles[m_currentIndex]);
            }
        }

        // Converts canvas to an image
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }

        function showDetailImage(filename) {
            // var c = document.getElementById("detailCanvas");
            // var ctx = c.getContext("2d");
            var xhr = new XMLHttpRequest();
            xhr.open('GET', filename);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function (e) {
                var buffer = xhr.response;
                var tiff = new Tiff({
                    buffer: buffer
                });

                var canvas = tiff.toCanvas();

                var width = tiff.width();
                var height = tiff.height();
                if (canvas) {
                    // alert("size:"+width + " " + height);
                    // var ctxx = canvas.getContext("2d");
                    // ctx.drawImage(canvas,0,0,width,height);
                    // ctx.putImageData(ctxx.data,0,0);
                    document.getElementById("detailCanvas").getContext("2d").putImageData(canvas.getContext("2d")
                        .getImageData(0, 0, width, height), 0, 0, 400, 400);
                    // document.getElementById("detailCanvas").getContext("2d").drawImage(canvas,0,0,width,height);
                    // $('#detailCanvas').putImageData(canvas.getImageData(0,0,width,height),0,0);
                    // ctx.putImageData(canvas.data,0,0);
                    /*
                      canvas.style.width = "170px";
                      canvas.addEventListener('click',function(e){
                              getEventPosition(e);
                          },false);
                      var $elem = $('<span class = "one"> </span>');
                      $elem.append(canvas);
                      */

                    // $('#MyDiv').append(canvas);
                }
            };
            xhr.send();
        };

        //哪个元素被点击
        function whichElement(e) {
            console.log(e.target.parentNode)
            var targ
            if (!e) var e = window.event
            if (e.target) targ = e.target
            else if (e.srcElement) targ = e.srcElement
            if (targ.nodeType == 3) // defeat Safari bug
                targ = targ.parentNode
            var tname
            tname = targ.tagName
            // alert("tname:" + tname);
            // var tid = new String(targ.id)
            var tid = targ.id;
            tid = tid.replace("canvas_", "");
            m_currentIndex = Number(tid);
            // alert("index:"+tid);
            if (tname == "IMG") {

                // showDetailImage('CMImage/'+imageFiles[1]);
                // alert("tname:" + targ.src);


                var detailImage = document.getElementById("detailImage");
                // var src = targ.src;
                // src.replace(/jpg/,"png");
                // alert(targ.original);
                detailImage.src = targ.src; //targ.original;

                detailImage.onload = function () {

                    var imageInfoTitle = document.getElementById("imageInfoTitle");
                    var imageInfoDetail = document.getElementById("imageInfoDetail");

                    imageInfoTitle.innerHTML = $(e.target.parentNode).find('.label-info').html();
                    // imageInfoDetail.innerHTML = imageInfoDetails[m_currentIndex];
                    ShowDiv("MyDiv", "fade");
                    startDrag(document.getElementById("detailImage"), document.getElementById("detailImage"));
                    // scrControl(0);
                    document.body.addEventListener('touchmove', bodyScroll, false);
                    $('body').css({
                        'overflow': 'hidden',
                        'position': 'fixed'
                    });
                    //'position':'fixed',"width":"100%"

                    // window.location.href = detailImage.src;
                    // window.open(detailImage.src);
                }

                /*
                  var v= document.getElementById(targ.id);
                    var canvas = document.getElementById("detailCanvas");
                  canvas.getContext("2d").drawImage(v,0,0,canvas.width,canvas.height);
                ShowDiv("MyDiv","fade");
                startDrag(document.getElementById("detailCanvas"),document.getElementById("detailCanvas"));
                */


                // var image = new Image();
                // image.onload = function(){
                //   var canvas = document.getElementById("detailCanvas");
                //   canvas.getContext("2d").drawImage(image,0,0,canvas.width, canvas.height);
                // }
                // image.src = "/4K.jpg";

                // document.getElementById("detailCanvas") = document.getElementById(targ.id);
                // alert("You clicked on a " + 'CMImage/'+imageFiles[1]);
            }
            // alert("You clicked on a " + tname + " element." + tid)
        }

        //


        var params = {
            zoomVal: 1,
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false
        };
        //图片缩放
        function bbimg(o) {
            var o = o.getElementsByTagName("img")[0];
            params.zoomVal += event.wheelDelta / 1200;
            if (params.zoomVal >= 0.2) {
                o.style.transform = "scale(" + params.zoomVal + ")";
            } else {
                params.zoomVal = 0.2;
                o.style.transform = "scale(" + params.zoomVal + ")";
                return false;
            }
        }
        //获取相关CSS属性
        var getCss = function (o, key) {
            return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
        };
        //拖拽的实现
        var startDrag = function (bar, target, callback) {
            if (getCss(target, "left") !== "auto") {
                params.left = getCss(target, "left");
            }
            if (getCss(target, "top") !== "auto") {
                params.top = getCss(target, "top");
            }
            //o是移动对象
            bar.onmousedown = function (event) {
                params.flag = true;
                if (!event) {
                    event = window.event;
                    //防止IE文字选中
                    bar.onselectstart = function () {
                        return false;
                    }
                }
                var e = event;
                params.currentX = e.clientX;
                params.currentY = e.clientY;
            };
            document.onmouseup = function () {
                params.flag = false;
                if (getCss(target, "left") !== "auto") {
                    params.left = getCss(target, "left");
                }
                if (getCss(target, "top") !== "auto") {
                    params.top = getCss(target, "top");
                }
            };
            document.onmousemove = function (event) {
                var e = event ? event : window.event;
                if (params.flag) {
                    var nowX = e.clientX,
                        nowY = e.clientY;
                    var disX = nowX - params.currentX,
                        disY = nowY - params.currentY;
                    target.style.left = parseInt(params.left) + disX + "px";
                    target.style.top = parseInt(params.top) + disY + "px";
                    if (typeof callback == "function") {
                        callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                    }
                    if (event.preventDefault) {
                        event.preventDefault();
                    }
                    return false;
                }
            }
        };
    </script>

    <style>
        button {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        button img {
            width: 20px;
            height: 20px;
        }
        .one {
            /*background: black;*/
            display: block;
            float: left;
            text-align: center;

            margin: 0 30px 30px 0;
        }

        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }

        .white_content {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 51%;
            height: 66%;
            border: 5px solid black;
            background-color: black;
            z-index: 1002;
            overflow: hidden;
        }

        #output {
            width: 70%;
            margin: auto;
            display: block;
        }

        #buttonDiv {
            position: absolute;
            width: 100%;
            bottom: 0;
            margin-bottom: 0 !important;
        }

        .white_content_small {
            display: none;
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            border: 16px solid lightblue;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

        .detail_image {
            /*relative*/
            position: relative;
            width: auto;
            height: 100%;
            background-color: black;
            z-index: 1002;
            /*overflow: auto;*/
            cursor: move;
        }

        .div_detail {
            float: right;
            width: 80%;
            height: 100%;
            background-color: black;
            text-align: center;
            z-index: 1002;
            overflow: hidden;
            position: relative;
            border: 1px solid #000;
        }

        .panel-body {
            background: grey;
        }
    </style>

    <!--<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')"  #4962C8 #3333CC/>-->
    <div style="background-color: #4962C8; height: 60px">
        <div style=" text-align:center;">
            <span class="text-muted" style="font-size: 35px; color: white;  vertical-align:middle; ">永新光学共聚焦图片展示</span>
        </div>

    </div>

    <div style="margin-left: 15px; margin-top: 30px; margin-right: 15px; margin-bottom: 30px;"
        onmousedown="whichElement(event)">
        <span id="output">
            <span class="one">
                <img src="http://47.114.153.52:8080/CMImage/20210707/HelaCell.jpg" id="canvas_1" class="img-rounded" style="width: 170px;"><br><br>
                <span class="label label-info">海拉细胞<br></span>
            </span>
        </span>
    </div>

    <!--弹出层时背景层DIV-->
    <div id="fade" class="black_overlay">
    </div>

    <div id="MyDiv" class="white_content">


        <div
            style="position: absolute; text-align: right; cursor: default; height: 40px; background: black; z-index: 1003; top: 0px; right: 0px;">
            <button class="btn btn-primary btn" onclick="CloseDiv('MyDiv','fade')">
                <img src="/public/images/close.png" alt="">关闭
            </button>
            <!--                 <span style="font-size: 16px;" class="glyphicon glyphicon-remove" onclick="CloseDiv('MyDiv','fade')">关闭</span> -->
        </div>
        <div id="imageInfo"
            style="position: absolute; float:left; display:inline; width:20%;  height: 100%; background-color: #3C3C3C; z-index: 1003; top: 0px; left: 0px;">

            <!-- width: 100%;height: auto; -->
            <div id="buttonDiv" style=" margin-bottom: 30px; margin-top: 0px; margin-left: 0px; margin-right: 0px;">
                <button style="width: 49%; float: left; height: 40px; background-color: black;"
                    onclick="previewImage()">
                    <img src="/public/images/left.png" alt="">
                </button>
                <button style="width: 49%; float: right; height: 40px; background-color: black;" onclick="nextImage()">
                    <img src="/public/images/right.png" alt="">
                </button>
            </div>

            <!-- width: 100%;height: 50px; -->
            <div style="margin-top: 30px; margin-left: 5px; margin-bottom: 0px; margin-right: 5px; text-align: center;">
                <br>
                <h3 id="imageInfoTitle" style="color: white"></h3>
            </div>
            <div style="margin-top: 30px; margin-bottom: 10px; margin-left: 15px; margin-right: 15px;">
                <span id="imageInfoDetail" style="color: white; white-space:pre-line"></span>
            </div>

        </div>

        <div id="divDetail" class="div_detail">
            <div onmousewheel="return bbimg(this)">
                <img id="detailImage" class="detail_image">
                <!-- <canvas id="detailCanvas" class="detail_image"></canvas> -->
                <!-- squirrel -->
            </div>
        </div>

    </div>
</body>